import React, { useState } from 'react'
import './index.css'

//直接在传参的时候把需要的数据结构赋值
//函数式组件在调用时传的参数,可以通过props接收,既然接收到了,可以在形参中直接解构赋值
export default function Item({ todo, done }) {

  //鼠标移入表单,颜色变灰,删除键显示
  //颜色变灰思路:1.鼠标移入移出,设置input的背景颜色2先给li一个active类名,鼠标移入移出添加删除类名
  //1.给li绑定鼠标移入移出事件
  //直接改变变量,不会重新渲染,需要用useState
  // let isActive = false
  const [isActive, setIsActive] = useState(false)
  const mouseEnterHandle = (e) => {
    // console.log(1);
    //这种写法,当点在span元素上时,只有前面一点位置变灰
    // e.target.style.background = '#ccc'
    // isActive = true
    setIsActive(true)
    // console.log(isActive);

  }
  //鼠标移入时,按钮出现
  //1.在函数里直接设置display,2.移入时isActive = true,display是block,可以根据isActive设置样式
  const mouseLeaveHandle = () => {

    setIsActive(false)

  }
  return (
    <li onMouseEnter={mouseEnterHandle} onMouseLeave={mouseLeaveHandle} className={isActive ? 'active' : ''}>
      <label>
        <input type="checkbox" checked={done} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" style={{ display: isActive ? 'block' : 'none' }}>删除</button>
    </li>
  )
}
